<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>白云区二手房可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart1" style="width: 1800px; height: 400px;margin-left: -100px"></div>

<script>
    var type_data = {{ type_data|safe }};
    var typeData = [];
    var numberData = [];

    for (var i = 0; i < type_data.length; i++) {
        typeData.push(type_data[i].type);
        numberData.push(type_data[i].number);
    }

    var chart1 = echarts.init(document.getElementById('chart1'));
    var option1 = {
        title: {
            text: '户型热度图',
            left: '800px'
        },
        xAxis: {
            name: '户型',  // 设置x轴名称
            type: 'category',
            data: typeData,
            position: 'left', // 设置x轴在左侧
            axisLabel: {
                align: 'right' // 设置x轴标签靠右对齐
            }
        },
        yAxis: {
            name: '成交数量',  // 设置x轴名称
            type: 'value',
            axisLabel: {
                formatter: '{value}',
            },
            nameTextStyle: {
                padding: [0, 30, 0, 0] // 设置y轴名称与上方的间距
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        series: [{
            type: 'bar',
            data: numberData,
            barWidth: '30%',
            barCategoryGap: '10%',  // 设置同一系列的柱子之间的距离为10%
            barGap: '20%',  // 设置不同系列之间的柱子之间的距离为20%
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },

        }]
    };
    chart1.setOption(option1);
</script>
<div id="chart2" style="width: 650px; height: 500px;margin-left: 100px;float: left"></div>
<script>
    var re_price_data =
    {{ re_price_data|safe }}
    var reData = []
    var avgpriceData = []

    for (var i = 0; i < re_price_data.length; i++) {
        reData.push(re_price_data[i].renovation);
        avgpriceData.push(re_price_data[i].avg_price);
    }
    var chart2 = echarts.init(document.getElementById('chart2'));
    var option2 = {
        title: {
            text: '装修程度平均价格图',
            left: '250px'
        },
        xAxis: {
            name: '装修程度',  // 设置x轴名称
            type: 'category',
            data: reData,
            position: 'left', // 设置x轴在左侧
            axisLabel: {
                align: 'right' // 设置x轴标签靠右对齐
            }
        },
        yAxis: {
            name: '平均成交价格（万元）',  // 设置y轴名称
            type: 'value',
            axisLabel: {
                formatter: '{value}',

            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        series: [{
            type: 'line',
            data: avgpriceData,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },

        }]
    };
    chart2.setOption(option2);


</script>
<div id="chart3" style="width: 650px; height: 500px;margin-left: 100px;float: right"></div>
<script>
    var re_number_data =
    {{ re_number_data|safe }}
    var reData = []
    var numberData = []

    for (var i = 0; i < re_number_data.length; i++) {
        reData.push(re_number_data[i].renovation);
        numberData.push(re_number_data[i].number);
    }
    var chart3 = echarts.init(document.getElementById('chart3'));
    var option3 = {
        title: {
            text: '装修程度热度图',
            left: '250px'
        },
        xAxis: {
            name: '装修程度',  // 设置x轴名称
            type: 'category',
            data: reData
        },
        yAxis: {
            name: '成交数量',  // 设置y轴名称
            type: 'value',
            nameTextStyle: {
                padding: [0, 30, 0, 0] // 调整左侧内边距数值，使y轴名称向左移动
            },
            axisLabel: {
                formatter: '{value}',

            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        series: [{
            type: 'line',
            data: numberData,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },

        }]
    };
    chart3.setOption(option3);
</script>
<div id="chart4" style="width: 650px; height: 500px;margin-left: 100px;float: left"></div>
<script>
    var floor_number_data =
    {{ floor_number_data|safe }}
    var Data = []

    for (var i = 0; i < floor_number_data.length; i++) {
        Data.push({
            value: floor_number_data[i].number,
            name: floor_number_data[i].floor
        });
    }
    var chart4 = echarts.init(document.getElementById('chart4'));
    var option4 = {
        title: {
            text: '楼层热度图',
            left: '250px'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [{
            type: 'pie',
            data: Data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                formatter: '{b}: {d}%'
            }

        }]
    };
    chart4.setOption(option4);
</script>
<div id="chart5" style="width: 650px; height: 500px;margin-left: 100px;float: right"></div>
<script>
    var floor_price_data =
    {{ floor_price_data|safe }}
    var floorData = []
    var priceData = []

    for (var i = 0; i < floor_price_data.length; i++) {
        floorData.push(floor_price_data[i].floor);
        priceData.push(floor_price_data[i].avg_price);
    }
    var chart5 = echarts.init(document.getElementById('chart5'));
    var option5 = {
        title: {
            text: '楼层平均成交价格图',
            left: '250px'
        },
        xAxis: {
            name: '楼层',  // 设置x轴名称
            type: 'category',
            data: floorData
        },
        yAxis: {
            name: '平均成交价格（万元）',  // 设置y轴名称
            type: 'value',
            axisLabel: {
                formatter: '{value}',

            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        series: [{
            type: 'bar',
            data: priceData,
            itemStyle: {
                emphasis: {
                    barBorderRadius: 10
                }
            }

        }]
    };
    chart5.setOption(option5);
</script>

<div id="chart6" style="width: 650px; height: 500px;margin-left: 100px;float: left"></div>
<script>
    var area_price_data =
    {{ area_price_data|safe }}
    var priceData = []
    var areaData = []

    for (var i = 0; i < area_price_data.length; i++) {
        priceData.push(area_price_data[i].price);
        areaData.push(area_price_data[i].area);
    }
    var chart6 = echarts.init(document.getElementById('chart6'));
    var option6 = {
        title: {
            text: '面积与价格关系图',
            left: '200px'
        },
        xAxis: {
            name: '面积',  // 设置x轴名称
            type: 'category',
            data: areaData
        },
        yAxis: {
            name: '平均成交价格（万元）',  // 设置y轴名称
            type: 'value',
            axisLabel: {
                formatter: '{value}',

            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
        series: [{
            type: 'scatter',
            data: priceData,
            itemStyle: {
                emphasis: {
                    barBorderRadius: 10
                }
            }

        }]
    };
    chart6.setOption(option6);
</script>
</body>
</html>
